<template>
  <div class="searchfind" v-if="findData.banners">
    <van-search @click="searchclick" v-model="value" placeholder="请输入作品名、创作人" />
    <div class="find">
      <FindBan :item="findData.banners"></FindBan>
      <FindFun :item="findData.recommended_position"></FindFun>
    </div>
    <div class="worksbox">
      <span class="works">作品</span>
      <span class="worksall" @click="worksall(0)">全部作品</span>
    </div>
    <div class="card">
      <FindCard :item="findData.categories"></FindCard>
    </div>
  </div>
  <MyLoading v-else></MyLoading>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Search } from "vant";
import FindBan from "@/components/FindBan.vue";
import FindFun from "@/components/FindFun.vue";
import FindCard from "@/components/FindCard.vue";
import MyLoading from "@/components/MyLoading.vue";

Vue.use(Search);
Vue.use(NavBar);
export default {
  data() {
    return {
      value: "",
      findData: {},
    };
  },
  components: {
    FindBan,
    FindFun,
    FindCard,
    MyLoading
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/xpc/page/discovery")
      .then((res) => {
        this.findData = res.data.data;
        this.$store.commit({type:"AllNav",value:this.findData.categories})
      });
  },
  methods:{
    searchclick(){
      this.$router.push({path:'/searchpage'})
    },
    worksall(id){
      this.$router.push({path:'/finddetail',query:{id:id}})
    }
  },
  
};
</script>

<style lang="less" scoped>
.searchfind {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  .worksbox {
    width: 100%;
    padding: 0px 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    .works {
      font-size: 20px;
      font-weight: 600;
    }
    .worksall {
      color: #d47769;
    }
  }
  .card {
    width: 100vw;
    height: 100%;
    padding: 0px 25px;
  }
}
</style>